<script>
  import { createEventDispatcher } from "svelte";
  import Select from "../components/Select.svelte";
  import Input from "../components/Input.svelte";
  import ColorPicker from "../components/ColorPicker.svelte";
  const dispatch = createEventDispatcher();
  const redraw = () => dispatch("redraw", { dataFlag, stroke, prng });

  let dataFlag = "0";
  let prng = "";
  let stroke = {
    l0Width: "4",
    l0Color: "#fff",
    l1Width: "2",
    l1Color: "#fff",
    l2Width: "2",
    l2Color: "#fff",
  };
  const dataSource = [{ value: "0", label: "全年" }].concat(
    [...Array(12).keys()].map((n) => ({
      value: String(n),
      label: `${n + 1}月`,
    }))
  );
  export function draw() {
    // console.log(stroke, dataFlag);
    redraw();
  }
</script>

<div class="drawer-side setting-panel">
  <label for="my-drawer" class="drawer-overlay" />
  <div
    class="form-control w-80 bg-base-100 text-base-content pt-4 px-2 settting-form"
  >
    <label class="label" for="outer-line">
      <span class="label-text">数据</span>
    </label>
    <Select bind:value={dataFlag} data={dataSource} placeholder="请选择" />
    <label class="label" for="outer-line">
      <span class="label-text">随机数种子</span>
    </label>
    <Input bind:value={prng} placeholder="请输入随机种子(可选)" />
    <h3 class="my-4">外框线设置</h3>
    <label class="label" for="outer-line">
      <span class="label-text">颜色</span>
    </label>
    <ColorPicker bind:value={stroke.l0Color} />
    <label class="label" for="outer-line">
      <span class="label-text">宽度</span>
    </label>
    <Input bind:value={stroke.l0Width} numeric />

    <h3 class="my-4">二级框线设置</h3>
    <label class="label" for="outer-line">
      <span class="label-text">颜色</span>
    </label>
    <ColorPicker bind:value={stroke.l1Color} />
    <label class="label" for="outer-line">
      <span class="label-text">宽度</span>
    </label>
    <Input bind:value={stroke.l1Width} numeric />

    <h3 class="my-4">三级框线设置</h3>
    <label class="label" for="outer-line">
      <span class="label-text">颜色</span>
    </label>
    <ColorPicker bind:value={stroke.l2Color} />
    <label class="label" for="outer-line">
      <span class="label-text">宽度</span>
    </label>
    <Input bind:value={stroke.l2Width} numeric />

    <button class="btn btn-primary w-full my-4" on:click={draw}>重新绘制</button
    >
  </div>
</div>

<style>
  .form-control {
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
  }
</style>
